<app-common-header [title]="'myAccount.add_bank_account.title' | translate"></app-common-header>

<ion-content>
  <div>
    <form [formGroup]="addBankForm">
      <ion-grid>
        <ion-row>
          <ion-col size="12">
            <ion-label>
              <ion-text color="" class="form_title">
                {{'myAccount.add_bank_account.page_title' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row class="input_bottom_color">
          <ion-col size="4">
            <ion-label class="label_top">
              <ion-text color="" class="input_label">
                {{'myAccount.add_bank_account.bank_name' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
          <ion-col size="8">
            <ion-select 
            interface="popover" class="clean_padding_left" icon="chevron-down"
             placeholder="{{'myAccount.add_bank_account.bank_name_placeholder' | translate}}" name="bankName" formControlName="bankName">
              <ion-select-option *ngFor="let item of bankNames" value="{{item.name}}">{{item.name}}</ion-select-option>
            </ion-select>
          </ion-col>
        </ion-row>
        <ion-row class="input_bottom_color">
          <ion-col size="4">
            <ion-label class="label_top">
              <ion-text color="" class="input_label">
                {{'myAccount.add_bank_account.bank_account' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
          <ion-col size="6">
            <ion-input placeholder=" {{'myAccount.add_bank_account.bank_account_placeholder' | translate}}" type="text" 
            required="true" name="bankAccount" maxlength="16"
            formControlName="bankAccount"></ion-input>
            <div *ngIf="bankAccount.hasError('pattern')" class="form-error-item">
              Bank accounts can only be 16 digit numbers
            </div>
          </ion-col>
          <ion-col size="2">
            <div  class="icon_content">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconphoto"></use>
              </svg>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" color="wathet" [disabled]="!addBankForm.valid" (click)="toNext(addBankForm.value)">
              {{'myAccount.add_bank_account.next_btn' | translate}}
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  </div>
</ion-content>